<template>
  <div class="content-page">
    <div class="search-box">
      <div class="real-box clearfix">
        <div>
          <el-input v-model="kw" placeholder="请输入标题关键字" class="big-input left" style="width: 624px"
                    @change="kwChange" clearable></el-input>
          <button class="search-btn"><i class="iconfont icon-sousuo"></i> 搜索</button>
        </div>
        <p><span class="img"></span><span>热门搜索 : </span><span class="item" v-for="(v,i) in tjList" :key="i"
                                                              :class="{'act':rmIndex===i}"
                                                              @click="kw=v;rmIndex=i">{{v}}</span></p>
      </div>
    </div>
    <div class="base-content">
      <el-scrollbar style="height: 100%" v-if="kw===''">
        <div class="flex-box">
          <div class="item" v-for="(v,i) in baseInfoList" :key="i">
            <div class="title-box" :class="v.type" @click="$router.push({path:v.url,query:{id:v.title}})">
              <span class="img"></span>
              <span class="real-title">{{v.title}}</span>
            </div>
            <ul class="content">
              <li v-for="(x,y) in v.list" :key="y">
                <span :title="x.title"><span class="dian"></span>{{x.title}}</span>
                <span class="right">{{x.time}}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-scrollbar>
      <div class="search-content-box" v-if="kw!=''">
        <div class="type-ul-box">
          <ul>
            <li v-for="(v,i) in searchList" :key="i" :class="{'act':searchSelected===i}"
                @click="searchTypeClick(i)"><span>{{v.name}}({{v.num}})</span></li>
          </ul>
        </div>
        <el-scrollbar class="scroll-bg" style="">
          <ul class="type-content-box">
            <li v-for="(v,i) in searchInfoList" :key="i">
              <div class="title">{{v.title}}</div>
              <div class="content">{{v.content}}</div>
              <span class="type"><span class="t">来自 : </span>{{v.type}}</span>
              <span class="time"><span class="t">发布时间 : </span>{{v.time}}</span>
              <span class="look"><span class="t">浏览 : </span>{{v.look}} <i class="iconfont icon-xianshimima"></i></span>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "thinkTank",
    data() {
      return {
        kw: '',
        tjList: ['湖泊实施湖长制', '河湖长制', '指导意见', '抗洪救灾与灾害'],
        rmIndex: null,
        baseInfoList: [
          {
            title: '法律法规',
            type: 'sj',
            url:'/knowledgeHouse/detailPage',
            list: [
              {
                title: '中办国办印发《关于在湖泊实施湖长制的指导意见》',
                time: '2002-08-29'
              }, {
                title: '中办国办印发《关于全面推行河长制的意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《关于全面实施河长制的指导意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              },
            ]
          }, {
            title: '标注规范',
            type: 'ts',
            url:'/knowledgeHouse/detailPage',
            list: [
              {
                title: '中办国办印发《关于在湖泊实施湖长制的指导意见》',
                time: '2002-08-29'
              }, {
                title: '中办国办印发《关于全面推行河长制的意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《关于全面实施河长制的指导意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              },
            ]
          }, {
            title: '公司红头文件',
            type: 'qz',
            url:'/knowledgeHouse/detailPage',
            list: [
              {
                title: '中办国办印发《关于在湖泊实施湖长制的指导意见》',
                time: '2002-08-29'
              }, {
                title: '中办国办印发《关于全面推行河长制的意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《关于全面实施河长制的指导意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              },
            ]
          }, {
            title: '产品资料库',
            type: 'fa',
            url:'/knowledgeHouse/detailPage',
            list: [
              {
                title: '中办国办印发《关于在湖泊实施湖长制的指导意见》',
                time: '2002-08-29'
              }, {
                title: '中办国办印发《关于全面推行河长制的意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《关于全面实施河长制的指导意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              },
            ]
          }, {
            title: '技术资料库',
            type: 'sz',
            url:'/knowledgeHouse/detailPage',
            list: [
              {
                title: '中办国办印发《关于在湖泊实施湖长制的指导意见》',
                time: '2002-08-29'
              }, {
                title: '中办国办印发《关于全面推行河长制的意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《关于全面实施河长制的指导意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              },
            ]
          }, {
            title: '我的智囊',
            type: 'wd',
            url:'/knowledgeHouse/detailPage',
            list: [
              {
                title: '中办国办印发《关于在湖泊实施湖长制的指导意见》',
                time: '2002-08-29'
              }, {
                title: '中办国办印发《关于全面推行河长制的意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《关于全面实施河长制的指导意见》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              }, {
                title: '湖南省《河湖长制实施方案》',
                time: '2018-01-05'
              },
            ]
          },
        ],
        searchList: [
          {name: '全部', num: 168},
          {name: '上级指示', num: 18},
          {name: '他山之石', num: 10},
          {name: '群众力量', num: 20},
          {name: '方案制度', num: 40},
          {name: '水知识', num: 50},
          {name: '我的智囊', num: 30},
        ],
        searchSelected: 0,
        searchInfoList: [
          {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '上级指示',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水。新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '方案制度',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '上级指示',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '他山之石',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '上级指示',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '上级指示',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '上级指示',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '上级指示',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '上级指示',
            time: '2018-01-01 08:00:00',
            look: 33
          }, {
            title: '全力做好2018年防汛抗旱工作 保障防洪和供水安全',
            content: '新华社北京7月19日电：7月以来，我国多地出现大到暴雨，长江发生2次编号洪水，嘉陵江上游、大渡河上中游、培江上游、沱江上游发生特大洪水',
            type: '上级指示',
            time: '2018-01-01 08:00:00',
            look: 33
          },
        ],
      }
    },
    methods: {
      searchTypeClick(n) {
        this.searchSelected = n;
      },
      kwChange(val) {
        let n = 0;
        for (let i of this.tjList) {
          if (val === i) {
            n++;
            break;
          }
        }
        if (!n) {
          this.rmIndex = null;
        }
      },
    },
    created() {
        this.$store.commit("setShowlefttree", false);
    },
    mounted() {

    },
    beforeDestroy() {

    },
    computed: {},
    watch: {},
    components: {}
  }
</script>

<style scoped lang="less">

  .content-page {
    padding-bottom: 12px;
    height: 100%;
    .search-box {
      text-align: center;
      height: 90px;
      padding-top: 23px;
      background: url("../../assets/images/thinkTank/search-bg.png") no-repeat;
      background-size: 100% 100%;
      .real-box {
        display: inline-block;
        height: 100%;
        > div {
          height: 40px;
        }
        .search-btn {
          background: #166BCE;
          color: #fff;
          height: 40px;
          width: 100px;
          float: left;
          border: none;
          outline: none;
          cursor: pointer;
        }
        p {
          text-align: left;
          height: 27px;
          line-height: 27px;
          color: #666666;
          span {
            display: inline-block;
            height: 27px;
            vertical-align: top;
          }
          .img {
            width: 27px;
            background: url("../../assets/images/thinkTank/huo.png") center center no-repeat;
          }
          .item {
            margin: 0 10px;
            cursor: pointer;
            &:hover {
              color: #1a1a1a;
              font-weight: bold;
            }
            &.act {
              color: #166BCE;
            }
          }
        }
      }
    }
    .base-content {
      height: calc(100% - 90px);
      margin-top: 12px;
     // padding: 0 75px;
      .flex-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /*height: 100%;*/
        margin: 0 12px;
        .item {
          width: calc(33.3% - 8px);
          border: 1px solid #C6D1DE;
          padding: 12px 12px 0 12px;
          &:nth-child(1), &:nth-child(2), &:nth-child(3) {
            margin-bottom: 12px;
          }
          .title-box {
            height: 108px;
            line-height: 108px;
            text-align: center;
            cursor: pointer;
            &.sj {
              background: url("../../assets/images/thinkTank/sj-bg.png") no-repeat;
              background-size: 100% 100%;
              .img {
                background: url("../../assets/images/thinkTank/sj.png") center center no-repeat;
              }
            }
            &.ts {
              background: url("../../assets/images/thinkTank/ts-bg.png") no-repeat;
              background-size: 100% 100%;
              .img {
                background: url("../../assets/images/thinkTank/ts.png") center center no-repeat;
              }
            }
            &.qz {
              background: url("../../assets/images/thinkTank/qz-bg.png") no-repeat;
              background-size: 100% 100%;
              .img {
                background: url("../../assets/images/thinkTank/qz.png") center center no-repeat;
              }
            }
            &.fa {
              background: url("../../assets/images/thinkTank/fa-bg.png") no-repeat;
              background-size: 100% 100%;
              .img {
                background: url("../../assets/images/thinkTank/fa.png") center center no-repeat;
              }
            }
            &.sz {
              background: url("../../assets/images/thinkTank/sz-bg.png") no-repeat;
              background-size: 100% 100%;
              .img {
                background: url("../../assets/images/thinkTank/sz.png") center center no-repeat;
              }
            }
            &.wd {
              background: url("../../assets/images/thinkTank/wd-bg.png") no-repeat;
              background-size: 100% 100%;
              .img {
                background: url("../../assets/images/thinkTank/wd.png") center center no-repeat;
              }
            }
            span {
              vertical-align: middle;
              display: inline-block;
            }
            .img {
              width: 50px;
              height: 50px;
            }
            .real-title {
              width: 155px;
              margin-left: 28px;
              text-align: center;
              font-size: 18px;
              font-weight: bold;
              color: #fff;
              background: url("../../assets/images/thinkTank/line.png") center center no-repeat;
              background-size: 100%;
            }
          }
          .content {
            li {
              height: 36px;
              line-height: 36px;
              cursor: pointer;
              &:hover {
                background: #EFF3F5;
              }
              > span {
                display: inline-block;
                height: 100%;
              }
              > span:first-child {
                width: calc(100% - 80px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .right {
                width: 80px;
              }
            }
            li + li {
              border-top: 1px dashed #C6D1DE;
            }
          }
        }
      }
      .search-content-box {
        height: 100%;
        .type-ul-box {
          height: 36px;
          border-bottom: 1px solid #C6D1DE;
          text-align: center;
          ul {
            display: inline-block;
            width: 724px;
            height: 100%;
            li {
              float: left;
              height: 100%;
              line-height: 35px;
              width: calc(100% / 7);
              span {
                display: inline-block;
                height: 100%;
                cursor: pointer;
                position: relative;
              }
              &.act {
                color: #166BCE;
                font-weight: bold;
                span:after {
                  content: '';
                  display: inline-block;
                  position: absolute;
                  left: 0;
                  bottom: -1px;
                  width: 100%;
                  height: 2px;
                  background: #166BCE;
                }
              }
            }
          }
        }
        .scroll-bg {
          height: calc(100% - 36px);
          text-align: center;
          background: url('../../assets/images/thinkTank/content-bg.png') no-repeat;
          background-size: 100% 100%;
          padding-bottom: 12px;
        }
        .type-content-box {
          display: inline-block;
          width: 724px;
          text-align: left;
          cursor: pointer;
          li {
            &:hover {
              background: #EFF3F5;
              .title {
                color: #166BCE;
              }
            }
            padding: 12px 0;
            .title {
              height: 40px;
              line-height: 40px;
              font-weight: bold;
              font-size: 15px;
            }
            .content {
              height: 17px;
              line-height: 17px;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            > span {
              display: inline-block;
              height: 40px;
              line-height: 40px;
              &.type {
                width: 160px;
              }
              &.time {
                width: 280px;
              }
            }
            .t {
              color: #666666;
            }
          }
          li + li {
            border-top: 1px dashed #C6D1DE;
          }
        }
      }
    }
  }
</style>
